<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

import NavBar from '@/components/NavBar.vue'

// 导入所有分类图片
import fastfoodImg from '@/assets/img/fastfood.png'
import mealImg from '@/assets/img/meal.png'
import hamburgerImg from '@/assets/img/hamburger.png'
import milkTeaImg from '@/assets/img/milk_tea.png'
import skewersImg from '@/assets/img/skewers.png'
import supperImg from '@/assets/img/supper.png'
import storeImg from '@/assets/img/store.png'
import noodleImg from '@/assets/img/noodle.png'

// 导入商家图片
import shop1Img from '@/assets/img/shop1.png'
import shop2Img from '@/assets/img/shop2.png'
import shop3Img from '@/assets/img/shop3.png'

const router = useRouter()
const location = ref('昆明市第十中学')

// 导航到餐厅详情页
const navigateToRestaurant = (id: number) => {
  router.push({ name: 'restaurant', params: { restaurantId: id } })
}

// 跳转到分类页面
const navigateToCategory = (categoryId: number) => {
  router.push({ name: 'category', params: { categoryId } })
}

// 创建图片映射对象
const categoryImages = [
  mealImg,      // 美食
  fastfoodImg,  // 快餐便当
  hamburgerImg, // 汉堡披萨
  milkTeaImg,   // 奶茶饮品
  skewersImg,   // 炸鸡炸串
  supperImg,    // 跑腿代购
  storeImg,     // 包子粥铺
  noodleImg     // 米粉面馆
]

const shopImages = [
  shop1Img,     // 麦当劳
  shop2Img,     // 肯德基
  shop3Img      // 必胜客
]

const categoryNames = [
  '美食', '快餐便当', '汉堡披萨', '奶茶饮品',
  '炸鸡炸串', '跑腿代购', '包子粥铺', '米粉面馆'
]
</script>

<template>
  <div class="pb-24 bg-gray-50 min-h-screen">
    <!-- 头部组件 -->
    <div class="px-4 py-4" style="background-color: #0097FE;"> 
      <div class="flex items-center">
        <!-- 定位图标 -->
        <div class="text-white mr-3">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </div>
        
        <!-- 位置信息 -->
        <div class="flex-1 min-w-0">
          <h2 class="text-lg font-bold text-white truncate">{{ location }}</h2>
          <p class="text-sm text-blue-100 mt-1">正在为您推荐附近美食</p>
        </div>
        
        <!-- 下拉箭头 -->
        <div class="text-blue-100 ml-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </div>
      </div>
    </div>
    
    <!-- 搜索框 -->
    <div class="px-4 mt-2">
      <div class="bg-white border border-gray-200 rounded-xl px-4 py-3 flex items-center shadow-sm transition-all duration-200 hover:shadow-md">
        <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <input 
          type="text" 
          placeholder="搜索美食、商家" 
          class="bg-transparent outline-none flex-1 text-gray-600 placeholder-gray-400"
        >
      </div>
    </div>
    
    <!-- 美食分类区域 -->
    <div class="mt-6 px-4">
      <div class="flex justify-between items-center mb-4">
        <h2 class="text-xl font-bold text-gray-800">美食分类</h2>
        <div class="text-primary text-sm font-medium hover:text-primary-dark transition-colors cursor-pointer">全部</div>
      </div>
      
      <div class="grid grid-cols-4 gap-5">
        <!-- 遍历所有分类 -->
        <div 
          v-for="(category, index) in 8" 
          :key="index"
          class="flex flex-col items-center cursor-pointer group" 
          @click="navigateToCategory(index + 1)"
        >
          <div class="w-20 h-20 rounded-2xl bg-gradient-to-br from-white to-gray-50 flex items-center justify-center mb-2 overflow-hidden shadow-md transition-all duration-300 group-hover:shadow-lg group-hover:scale-105">
            <img 
              :src="categoryImages[index]" 
              :alt="categoryNames[index]" 
              class="w-12 h-12 object-contain transition-transform duration-300 group-hover:scale-110"
            >
          </div>
          <span class="text-sm font-medium text-gray-700 group-hover:text-primary transition-colors">
            {{ categoryNames[index] }}
          </span>
        </div>
      </div>
    </div>
    
    <!-- 推荐商家区域 -->
    <div class="mt-8 px-4">
      <h2 class="text-xl font-bold text-gray-800 mb-4">附近商家</h2>
      <div class="space-y-5">
        <!-- 商家卡片1 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300 hover:shadow-lg" @click="navigateToRestaurant(1)">
          <div class="h-44 relative">
            <img 
              :src="shopImages[0]" 
              alt="麦当劳" 
              class="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
            >
            <!-- 商家标签 -->
            <div class="absolute top-3 right-3 bg-primary bg-opacity-90 text-white text-xs font-bold px-3 py-1 rounded-full">
              减配折
            </div>
          </div>
          <div class="p-4">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-bold text-lg text-gray-800">麦当劳（中汇店）</h3>
                <div class="flex items-center text-sm text-gray-500 mt-1">
                  <span class="text-primary font-bold">4.8</span>
                  <span class="mx-2">月售1098</span>
                  <span>38分钟</span>
                </div>
              </div>
            </div>
            <div class="mt-2 text-gray-600 flex items-center text-sm">
              <div class="flex">
                <span>起送 ¥20</span>
                <span class="mx-2">|</span>
                <span>配送 ¥5</span>
              </div>
              <div class="ml-auto">3.5km</div>
            </div>
          </div>
        </div>
        
        <!-- 商家卡片2 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300 hover:shadow-lg" @click="navigateToRestaurant(2)">
          <div class="h-44 relative">
            <img 
              :src="shopImages[1]" 
              alt="肯德基" 
              class="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
            >
            <!-- 商家标签 -->
            <div class="absolute top-3 right-3 bg-orange-500 bg-opacity-90 text-white text-xs font-bold px-3 py-1 rounded-full">
              新店优惠
            </div>
          </div>
          <div class="p-4">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-bold text-lg text-gray-800">肯德基（嘉年华店）</h3>
                <div class="flex items-center text-sm text-gray-500 mt-1">
                  <span class="text-primary font-bold">4.6</span>
                  <span class="mx-2">月售1560</span>
                  <span>25分钟</span>
                </div>
              </div>
            </div>
            <div class="mt-2 text-gray-600 flex items-center text-sm">
              <div class="flex">
                <span>起送 ¥15</span>
                <span class="mx-2">|</span>
                <span>配送 ¥3</span>
              </div>
              <div class="ml-auto">1.8km</div>
            </div>
          </div>
        </div>
        
        <!-- 商家卡片3 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden cursor-pointer transition-all duration-300 hover:shadow-lg" @click="navigateToRestaurant(3)">
          <div class="h-44 relative">
            <img 
              :src="shopImages[2]" 
              alt="必胜客" 
              class="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
            >
            <!-- 商家标签 -->
            <div class="absolute top-3 right-3 bg-red-500 bg-opacity-90 text-white text-xs font-bold px-3 py-1 rounded-full">
              满100减20
            </div>
          </div>
          <div class="p-4">
            <div class="flex justify-between items-start">
              <div>
                <h3 class="font-bold text-lg text-gray-800">必胜客（霖雨路店）</h3>
                <div class="flex items-center text-sm text-gray-500 mt-1">
                  <span class="text-primary font-bold">4.5</span>
                  <span class="mx-2">月售980</span>
                  <span>30分钟</span>
                </div>
              </div>
            </div>
            <div class="mt-2 text-gray-600 flex items-center text-sm">
              <div class="flex">
                <span>起送 ¥25</span>
                <span class="mx-2">|</span>
                <span>配送 ¥4</span>
              </div>
              <div class="ml-auto">2.3km</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 添加底部导航栏 -->
    <NavBar />
  </div>
</template>

<style scoped>
.pb-24 {
  padding-bottom: 6rem;
}

/* 添加背景渐变 */
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, #ffffff, #f9fafb);
}

/* 悬停效果 */
.group-hover\:shadow-lg {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>